<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>企业授权</i></h3>

      <el-steps :active="active" style="margin: 40px 40px 40px 80px">
        <el-step title="填写股东信息"></el-step>
        <el-step title="立即授权"></el-step>
        <el-step title="授权状态"></el-step>
      </el-steps>

      <div v-if="active === 1" class="user-borrower">
        <el-form label-width="80px" style="margin-right: 300px;margin-left: 100px">

          <ul>
            大股东
            <el-form-item label="姓名" prop="partnername">
              <el-input v-model="partners.partnername" />
            </el-form-item>
            <el-form-item label="电话" prop="partnerphone">
              <el-input v-model="partners.partnerphone" />
            </el-form-item>
          </ul>

          <el-form-item style="margin-left: 50px">
            <!--            <el-button
                            type="primary"
                            @click="addNewList"
                        >
                          添加新股东
                        </el-button>-->
            <el-button
                type="primary"
                @click="save"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
        <el-alert
            title="您提供的任何信息我们都承诺予以保护，不会挪作他用。"
            type="warning"
            :closable="false"
        >
        </el-alert>
      </div>

      <div v-if="active === 2" class="user-borrower">
        <el-form label-width="80px" style="margin-right: 300px;margin-left: 100px">
          <el-form>
            <div style="margin: 40px 40px 60px 80px">
              <el-alert
                  title="您的股东信息已成功提交，请法人进行签字授权"
                  type="warning"
                  show-icon
                  :closable="false"
              >
              </el-alert>
            </div>
            <div style="margin: 50px -70px 20px 60px">
              <vue-esign
                  ref="esign"
                  :width="800"
                  :height="300"
                  :isCrop="isCrop"
                  :lineWidth="lineWidth"
                  :lineColor="lineColor"
                  :bgColor.sync="bgColor"
              />
            </div>

          </el-form>

          <el-form-item style="text-align: center">
            <el-button
                type="primary"
                @click="prev"
            >
              返回
            </el-button>
            <el-button
                type="primary"
                @click="handleReset"
            >
              清空签名
            </el-button>
            <el-button
                type="primary"
                @click="handleGenerate"
            >
              授权
            </el-button>
          </el-form-item>
        </el-form>
        <el-alert
            title="您提供的任何信息我们都承诺予以保护，不会挪作他用。"
            type="warning"
            :closable="false"
        >
        </el-alert>
      </div>

      <div v-if="active === 3">
        <div style="margin: 40px 40px 60px 80px">
          <el-alert
              title="您的企业授权完成，请进行贷款申请"
              type="success"
              show-icon
              :closable="false"
          >
          </el-alert>
        </div>
        <el-form label-width="100px" style="margin-right: 300px">
          <el-descriptions style="margin-left: 180px;margin-top: 50px" direction="vertical" :column="1" border>
            <el-descriptions-item label="股东姓名">{{authorize.partnerName}}</el-descriptions-item>
            <el-descriptions-item label="股东手机号">{{authorize.partnerPhone}}</el-descriptions-item>
            <el-descriptions-item label="是否授权签字">{{authorize.resultImg}}</el-descriptions-item>
            <el-descriptions-item label="提交时间">{{authorize.commitTime}}</el-descriptions-item>
          </el-descriptions>
        </el-form>
        <el-button style="margin: 20px 10px 10px 300px" type="primary" @click="cancled">
          重新授权
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "apply",
  data() {
    return {
      nextId:1,
      //公司股东成员
      partners:[
        {partnername:'',partnerphone:''},
      ],

      active: 1, //步骤

      //授权签字
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '#ea889f',
      resultImg: '',
      isCrop: false,

      a:{},
      authorize:{
        commitTime:'',
        partnerName:'',
        partnerPhone:'',
        resultImg:'',
      }

    }
  },
  mounted() {
    this.$axios
        .post(`http://localhost:9090/loan/authorize/getAuthorizeByUid`).then(
        response => {
          this.a=response.data
          if (response.data.success==true){
            this.active=3
            this.authorize.commitTime=response.data.obj.commitTime
            this.authorize.partnerName=response.data.obj.partnerName
            this.authorize.partnerPhone=response.data.obj.partnerPhone
            this.authorize.resultImg=response.data.obj.resultImg
          }
        }
    )
  },

  created() {
    this.$axios
        .post(`http://localhost:9090/loan/authorize/getAuthorizeByUid`).then(
        response => {
          this.a=response.data
          if (response.data.success==true){
            this.active=3
            this.authorize.commitTime=response.data.obj.commitTime
            this.authorize.partnerName=response.data.obj.partnerName
            this.authorize.partnerPhone=response.data.obj.partnerPhone
            this.authorize.resultImg=response.data.obj.resultImg
          }
        }
    )
  },
  methods: {
    cancled() {
      var result = confirm("是否重新授权!")
      if (result==true){
        this.$axios
            .post(`http://localhost:9090/loan/authorize/deleteAuthorizeByUid`).then(
            response => {
              console.log(response.data.success)
              if (response.data.success==true){
                this.active=1
              }
            }
        )
      }
    },
    //提交授权申请
    save() {
      if (!(this.partners.partnername)){
        this.$message({
          type: 'info',
          message: "请填写姓名"
        })
      }else if (!(this.partners.partnerphone)){
        this.$message({
          type: 'info',
          message: "请填写电话"
        })
      }else if ((this.partners.partnername)||(this.partners.partnerphone))
        this.active++
    },
    //提交授权申请
    prev() {
      this.active -= 1
    },

    /*addNewList(){
      const partnerObj = {labelid:'股东',partnername:'',partnerphone:''}
      this.nextId++
      partnerObj.labelid += this.nextId
      this.partners.push(partnerObj)
    },*/

    //清空画布
    handleReset () {
      this.$refs.esign.reset()
    },
    //生成图片进行授权
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res

        alert(this.resultImg)
        this.active++
        this.$axios
            .post(`http://localhost:9090/loan/authorize/addAuthorize?resultImg=`
                +this.$qs.stringify(this.resultImg)+`&partnerName=`
                +this.partners.partnername
                +`&partnerPhone=`+this.partners.partnerphone).then(
            response => {
              console.log(response.data)
              if (response.data.success==true){
                this.$message({
                  type: 'success',
                  message: "授权成功"
                })
              }else {
                this.$message({
                  type: 'info',
                  message: "授权失败"
                })
              }

            }
        )


      }).catch(err => {
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    }

  },
}
</script>

<style scoped>

</style>
